<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-row>
                <el-col :span="4"><el-button type="primary" plain @click="addCureDialog">添加</el-button></el-col>
                <el-col :span="4"><el-input v-model="input" placeholder="姓名"  prefix-icon="el-icon-search"></el-input></el-col>
                <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
            </el-row>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
                <el-table-column prop="gender" label="性别" width="180" align="center"></el-table-column>
                <el-table-column prop="source" label="接触来源" width="180" align="center"></el-table-column>
                <el-table-column prop="address" label="隔离地址" width="180" align="center"></el-table-column>
                <el-table-column prop="date" label="隔离开始日期" width="180" align="center" class="el-icon-time">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        {{ scope.row.date }}
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <el-button plain size="mini" @click="ModiDiglog">编辑</el-button>
                    <el-button type="primary" plain size="mini" @click="open">解除隔离</el-button>
                    <el-button type="primary" plain size="mini" @click="showCureDialog">转为患者</el-button>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
        </el-form>
        
        <!-- Form -->
        <el-dialog title="转为患者" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="住院时间" :label-width="formLabelWidth">
                            <el-input placeholder="请输入住院时间" suffix-icon="el-icon-date" v-model="form.date"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="症状" :label-width="formLabelWidth">
                            <el-input v-model="form.symp"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>  
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="治疗医院" :label-width="formLabelWidth">
                            <el-input v-model="form.hospital"></el-input>
                        </el-form-item>     
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否重症" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.isSevere">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.desc" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- Form -->
        <el-dialog :title="contactDiglogTitle" :visible.sync="dialogFormVisible2">
            <el-form :model="form"  :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
                            <el-input v-model="form.gender"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="idcard" :label-width="formLabelWidth">
                            <el-input v-model="form.idcard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄" :label-width="formLabelWidth">
                            <el-input-number v-model="form.age"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码" prop="phone" :label-width="formLabelWidth">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接触来源" prop="source" :label-width="formLabelWidth">
                            <el-input v-model="form.source"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="隔离地址" :label-width="formLabelWidth">
                            <el-input v-model="form.Isolation_address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="隔离开始时间" :label-width="formLabelWidth">
                            <el-col>
                                <el-form-item prop="start_date">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.out_date" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-col :span="12">
                    <el-form-item label="住址" :label-width="formLabelWidth">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- Form -->
        <el-dialog :title="contactDiglogTitle" :visible.sync="dialogFormVisible3">
            <el-form :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
                            <el-input v-model="form.gender"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号" prop="idcard" :label-width="formLabelWidth">
                            <el-input v-model="form.idcard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄" :label-width="formLabelWidth">
                            <el-input-number v-model="form.age"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电话号码" prop="phone" :label-width="formLabelWidth">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="接触来源" prop="source" :label-width="formLabelWidth">
                            <el-input v-model="form.source"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="隔离地址" :label-width="formLabelWidth">
                            <el-input v-model="form.Isolation_address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="隔离开始时间" :label-width="formLabelWidth">
                            <el-col>
                                <el-form-item prop="start_date">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.out_date" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-col :span="12">
                    <el-form-item label="住址" :label-width="formLabelWidth">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      input: '',
      tableData: null,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
        form: {
            name:'',
            gender:'',
            idcard:'',
            age:'',
            phone:'',
            source:'',
            hospital:'',
            Isolation_address:'',
            start_date:'',
            address:'',
        },
        rules: {
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
            idcard: [
                { required: true, message: '请输入身份证号', trigger: 'blur' },
                { min: 18, max: 18, message: '长度是 18 个字符', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入手机号码', trigger: 'blur' },
                { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                {
                  pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                  message: '请输入正确的手机号码'
                }
        ]
        },
        formLabelWidth: '130px'
    }
  },
  created(){
      this.fetchData()
  },
  methods:{
      fetchData(){
          request({
              url: '../patient_list.json',
              method: 'get'
          }).then(response => {
              this.tableData = response.data
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      showCureDialog(){
          this.dialogFormVisible = true
            request({
              url:'../cure_info.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
      },
      addCureDialog(){
          this.dialogFormVisible2= true
          this.contactDiglogTitle = '添加'
              this.form = {
                    "name": "",
                    "gender":undefined,
                    "idcard":"",
                    "age":undefined,
                    "phone":"",
                    "date":"",
                    "source":"",
                    "address":"",
                    "address2":""
              }
      },
      ModiDiglog(){
           this.dialogFormVisible3= true  
           this.contactDiglogTitle = '修改'
            request({
              url:'../contact_list.json',
              method:'get'
          }).then(response => {
              this.form = response.data
          })
      },
      open() {
        this.$confirm('您确定要解除隔离吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '解除隔离成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消解除隔离'
          });          
        });
      }
  }
}
</script>